<template>
	<view id="app">
		<view class="fenlei">
			<view class="fenlei-list">
			<scroll-view style="height: 600px;" scroll-y="true">
				<view class="li" v-for="(item,index) in fenleis" :class="{'active': index==n? true:false}" @click="change(index,item.id)"><a>{{item.gname}} </a></view>
			</scroll-view>
			</view>
			<view class="bigbox">
				<view id="header">
					<view class="fenlei-box" :class="{'erjiactive':n2==-1?true:false}" @click="getAllGoods()">
						<image src="../../../static/xielian.jpg" alt="">
						<view>全部</view>
					</view>
					<view class="fenlei-box" v-for="(item,i) in childrens" @click="getnext(item.id,i)" :class="{'erjiactive':i==n2?true:false}">
						<image :src="switchImg(item.icon)" class="img" mode="heightFix" alt="" />
						<view>{{item.gname}}</view>
					</view>
				</view>
				<scroll-view class="" id="content" scroll-y="true">
					<view class="goods-box" v-for="item in goods">
						<view :gid="item.gid" @click.stop="goDetails(item.gid)">
							<view>
								<image :src="switchImg(item.gImages)" class="goods-img" mode="heightFix" alt="" />
							</view>
							<view class="goods-info">
								<view>{{item.gName}}</view>
								<view class="goods-price">￥{{item.gPrice}}</view>
								<view>销售数量:{{item.gsellnum}}</view>
							</view>
						</view>

					</view>
					<p class="nomore" v-show="nomore">没有数据了</p>
				</scroll-view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fenleis:[],  	// 一级分类
				childrens:[],  // 二级分类
				goods:[],      // 商品
				typeid:1,      // 点击分类的id
				typeid2:0,		// 二级分类的id
				n:0,           // 一级目录下标
				page:1,        // 分页
				nomore:false,	// 没有数据了
				n2:-1,			// 二级目录下标,-1表示全部
				list:[
					{
							iconPath: "home",
							selectedIconPath: "home-fill",
							text: '首页',
							customIcon: false,
							pagePath: "/pages/index/index"
						},
						{
							iconPath: "coupon",
							selectedIconPath: "coupon-fill",
							text: '分类',
							customIcon: false,
							pagePath: "/pages/quanfan/fenlei/fenlei"
						},
						{
							iconPath: "shopping-cart",
							selectedIconPath: "shopping-cart-fill",
							text: '购物车',
							customIcon: false,
							pagePath: "/pages/quanfan/cart/cart"
						},
						{
							iconPath: "account",
							selectedIconPath: "account-fill",
							text: '个人中心',
							customIcon: false,
							pagePath: "/pages/center/index"
						},
				],
				current: 0
			}
		},
		onLoad() {
			// /xielian/category/types?tid=0
			// 请求一级菜单
			this.$http.get('/xielian/category/types', {
				tid: 0,
			}).then(res => {
				this.fenleis=res.data.data;
				this.childrens=this.fenleis[this.n].children;
			})
			this.getAllGoods();
			// 添加滚动
			// let listObj = document.querySelector("#content");  //页面地址list的盒子
			
		},
		methods: {
			tab(e){
				this.current = e;
			},
			switchImg(img){
				if(img.length>0)
					return this.host+img;
				else
					return '../../static/index/gm.png';
			},
			change(i,d){
				this.goods=[]
				this.n=i;
				this.n2=-1;
				this.typeid=d;
				this.getAllGoods()	;
				this.childrens=this.fenleis[i].children;
				// this.goods=this.fenleis[this.n].goods;
			},
			goDetails(id){
				uni.navigateTo({
					url:'../GoodsDetail?gid='+id
				})
			},
			getnext(id,i){
				this.page=1;
				this.n2=i;
				this.typeid2=id;
				this.nomore=false;
				this.goods=[];
				this.getGoodsByType(id);
			},
			getGoodsByType(id){
				this.$http.get('/xieliangoods', {
					p:"selectTypeGoods",
					page: this.page,
					twoid:id,
					limit:50
				}).then(res => {
					if(res.data.list.length>0)
						this.goods=this.goods.concat(res.data.list);
					else{
						this.nomore=true;
					}
				})
			},
			getAllGoods(){
				this.page=1;
				this.n2=-1;
				this.nomore=false;
				this.goods=[];
				this.$http.get('/xieliangoods', {
					p:"selectTypeGoods",
					page: this.page,
					oneid:this.typeid,
					limit:100
				}).then(res => {
						this.goods=res.data.list;
				})
			}
		},
	}
</script>

<style>
	.active{
					background: white;
				}
				.li{
					padding: 5px 0px;
				}
				.fenlei a{
					display: block;
					font-size: 16px;
					height: 30px;
					line-height: 30px;
					padding-left: 20px;
					/*text-align: center;*/
				}
				.active a{
					border-left: 2px solid black;
				}
				.fenlei-list{
					width: 8rem;
					background:#f0f3f8;
					min-height: 600px;
					max-height: 100%;
					overflow: auto;
				}
				.fenlei-list .active a{
					font-weight: bold;
				}
				.fenlei-box{
					width: 6.25rem;
					text-align: center;
					margin-right: 10px;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
				}
				#header .fenlei-box{
					width: 7rem;
					text-align: center;
				}
				.fenlei-box image{
					height: 60px;
					width: 50px;
					display: block;
					margin: auto;
				}
				.goods-box{
	
				}
				.fenlei-box view{
					line-height: normal;
					text-align: center;
					overflow:hidden;/*隐藏文字*/
					text-overflow:ellipsis;/*显示 */
					white-space:nowrap;/*不换行*/
				}
				.fenlei{
					display: flex;
					justify-content: flex-start;
					height: 100%;
				}
				.bigbox{
					/*margin-left: 10px;*/
					width: 80%;
					/*padding: 12px;*/
					background: #f0f0f0;
					padding-top: 0px;
					overflow: auto;
				}
				.bigbox-head{
					margin-top: 20px;
				}
				.bigbox-head span{
					font-weight: bold;
					font-size: 1.125rem;
				}
				.bigbox-head image{
					width: 1.875rem;
				}
				#header{
					width: 26rem;
					overflow: auto;
					display: flex;
					background-color: white;
					flex-wrap: nowrap;
				}
				#header view{
					font-size: 16px;
				}
				#content{
					justify-content: left;
					height: 1200rpx;
					/* overflow: auto; */
				}
				#content .nomore{
					text-align: center;
				}
				.goods-box>view{
					display: flex;
					padding: 10px;
				}
				.goods-box image{
					max-width: 100px;
				}
				.goods-box{
					background-color: white;
					margin-top: 5px;
				}
				.goods-info{
					display: flex;
					margin-left: 16px;
					flex-direction: column;
					justify-content: space-between;
				}
				.erjiactive{
					color: #5d8dd7;
				}
				.goods-box .goods-img{
					border-radius: 8px;
					height: 80px;
					width: 80px;
				}
				.goods-box .goods-price{
					color: #c02334;
					margin-top: 20px;
					font-weight: bold;
				}
				.goods-info view{
					color: #585858;
				}
				.img{
					height: 50rpx;
				}
</style>
